<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>异常页面</title>
    <style>
      *,
      html,
      body {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
      }
      .error-body {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
      }
      .center-box {
      }
      .width100 {
        width: 100%;
        padding: 10px;
      }
      .error-button {
        box-sizing: border-box;
        padding: 10px 15px;
        text-align: center;
        color: #fffdfd;
        background: #009688;
      }

      .error-button-animation {
        animation: rippleDrop 0.6s linear;
      }
      @keyframes rippleDrop {
        100% {
          opacity: 0;
        }
        50% {
          opacity: 0.3;
        }
        0% {
          opacity: 1;
        }
      }
    </style>
    <script>
      const loadPage = "./client.html";
      function reloadMainPage() {
        document.querySelector(".error-button").className =
          "error-button error-button-animation";
        try {
          //window.androidJS.executeMethod('system/reloadMainPage','GET','');
          window.location.href = loadPage;
        } catch (e) {}
        setTimeout(() => {
          document.querySelector(".error-button").className = "error-button ";
        }, 1000);
      }

      function setErrorInfo(errorCode, errorDescription, method, url) {
        const html = `<div class="width100" style="text-align:center;font-size:44px;color:#673ab7;font-family: fantasy;font-weight: bold;">${errorCode}</div>
            <div class="width100" style="font-size:22px;color:#999">${
              errorDescription || "连接失败！"
            }</div>
            <div class="width100" style="font-size:12px;color:#999">${method}: ${url}</div>`;
        document.querySelector(".error-info").innerHTML = html;
      }

      function getErrorParams() {
        const url = window.location.href;
        const params = eval(
          `({'${url
            .substring(url.indexOf("?") + 1)
            .replace(/=/g, "':'")
            .replace(/&/g, "','")}'})`
        );
        setErrorInfo(
          params.errorCode,
          params.errorDescription,
          params.method,
          unescape(params.url)
        );
      }

      setTimeout(() => {
        getErrorParams();
      }, 200);


    </script>
  </head>
  <body>
    <div class="error-body">
      <div style="width: 100%; height: auto">
        <p class="error-info">
          <div style="width:100%;text-align:center">没有更多信息 !</div>
        </p>

        <div
          class="width100"
          style="display: flex; justify-content: center; padding-bottom: 100px"
          onclick="reloadMainPage()"
        >
          <div class="error-button" style="flex-grow: 1">重试</div>
        </div>
      </div>
    </div>
  </body>
  <head></head>
</html>
